<template>
    <div class="shopcat-container">

        <!-- 商品区域 -->
        <div class="goods-list" v-for="(item,index) in goodsList" :key="item.id">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">   
                        <mt-switch 
                        v-model="$store.getters.getGoodsSelected[item.id]"
                        @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"
                        ></mt-switch>
                        <img src="https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/O1CN01SXV7FN1IOugh70aYE_!!0-item_pic.jpg_160x160q90.jpg" alt="">
                        <div class="info">
                            <h1>小米</h1>
                            <p>
                                <span class="price">￥{{item.price}}</span> 
                                <numbox :numboxcount="item.count" :numboxId="item.id"></numbox>
                                <a href="" @click.prevent="remove(item.id, index)">删除</a>
                            </p>
                        </div>
                       
                    </div>
                </div>
            </div> 
        </div>
        

        <!--  结算区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                         <p>
                             总计（不含运费）
                         </p>
                         <p>已勾选商品<span>{{$store.getters.getGoodsCountAndAmount.count}}</span>件，总计：<span>￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>

        </div>

        <p>{{$store.getters.getGoodsSelected}}</p>
    </div>
    
</template>

<script>
import numbox from "../subcomponents/shopcar_numbox"
export default {
    data(){
        return{
            goodsList:[]
        }
    },

    components: {
        numbox
    },

    methods: {
        getGoodsList(){
           var ids = [];
           this.$store.state.car.forEach(item => {
               ids.push(item.id);
           });

           var idsString = ids.join(",");
           console.log(idsString);
           
          this.goodsList = this.$store.state.car;
        },

        remove(id, index){
            // 删除界面中的索引 从索引为i，删除一个元素
            this.goodsList.splice( index, 1);
            // 删除
            this.$store.commit("remove", {
                id: id,
            });
        },

        selectedChanged(id, val){
            console.log(id, val);
            this.$store.commit("updateGoodsSeleted", {
                id: id,
                selected:val
            })
        }
    },

    created(){
        this.getGoodsList();
    }
    
}
</script>

<style lang="scss" scoped>
.shopcat-container{
    background-color: #ccc;
    overflow: hidden;
    align-items: center;

    .mui-card-content-inner{
        display: flex;
        .info{
            h1{
                font-size: 14px;
                margin-bottom: 3px;
            }

            p{
                .price{
                    color: red;
                }
            }
        }
    }

    img{
        height: 60px;
        min-height: 60px;
    }

    .jiesuan{
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            margin-bottom: 5px;
        }

        span {
            color: red;
        }
    }
}
</style>